From f076420e68f31407b8354c2028045dfcdff538ec Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 9 Feb 2026 13:19:40 +0400
Subject: [PATCH] fix

---
 apps/v4/components/block-viewer.tsx           | 10 +--
 .../docs/components/base/toggle-group.mdx     | 10 +++
 .../docs/components/radix/toggle-group.mdx    | 10 +++
 apps/v4/examples/__index__.tsx                | 26 +++++++
 .../toggle-group-font-weight-selector.tsx     | 61 ++++++++++++++++
 apps/v4/examples/base/ui-rtl/sidebar.tsx      |  6 +-
 apps/v4/examples/radix/sidebar-rtl.tsx        |  3 +-
 .../toggle-group-font-weight-selector.tsx     | 62 +++++++++++++++++
 apps/v4/examples/radix/ui-rtl/sidebar.tsx     |  6 +-
 .../base-lyra/toggle-group-example.json       |  2 +-
 .../base-maia/toggle-group-example.json       |  2 +-
 .../base-mira/toggle-group-example.json       |  2 +-
 .../base-nova/toggle-group-example.json       |  2 +-
 .../base-vega/toggle-group-example.json       |  2 +-
 .../radix-lyra/toggle-group-example.json      |  2 +-
 .../radix-maia/toggle-group-example.json      |  2 +-
 .../radix-mira/toggle-group-example.json      |  2 +-
 .../radix-nova/toggle-group-example.json      |  2 +-
 .../radix-vega/toggle-group-example.json      |  2 +-
 .../base/examples/toggle-group-example.tsx    | 68 ++++++++++++++++++
 .../radix/examples/toggle-group-example.tsx   | 69 +++++++++++++++++++
 21 files changed, 329 insertions(+), 22 deletions(-)
 create mode 100644 apps/v4/examples/base/toggle-group-font-weight-selector.tsx
 create mode 100644 apps/v4/examples/radix/toggle-group-font-weight-selector.tsx

diff --git a/apps/v4/components/block-viewer.tsx b/apps/v4/components/block-viewer.tsx
index 54c48c445b..887906ba49 100644
--- a/apps/v4/components/block-viewer.tsx
+++ b/apps/v4/components/block-viewer.tsx
@@ -71,10 +71,10 @@ type BlockViewerContext = {
   resizablePanelRef: React.RefObject<PanelImperativeHandle | null> | null
   tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
   highlightedFiles:
-  | (z.infer<typeof registryItemFileSchema> & {
-    highlightedContent: string
-  })[]
-  | null
+    | (z.infer<typeof registryItemFileSchema> & {
+        highlightedContent: string
+      })[]
+    | null
   iframeKey?: number
   setIframeKey?: React.Dispatch<React.SetStateAction<number>>
 }
@@ -154,7 +154,7 @@ function BlockViewerToolbar({ styleName }: { styleName: Style["name"] }) {
         value={view}
         onValueChange={(value) => setView(value as "preview" | "code")}
       >
-        <TabsList className="grid h-8! grid-cols-2 items-center p-1 *:data-[slot=tabs-trigger]:h-6 *:data-[slot=tabs-trigger]:rounded-sm *:data-[slot=tabs-trigger]:px-2 *:data-[slot=tabs-trigger]:text-xs rounded-lg">
+        <TabsList className="grid h-8! grid-cols-2 items-center rounded-lg p-1 *:data-[slot=tabs-trigger]:h-6 *:data-[slot=tabs-trigger]:rounded-sm *:data-[slot=tabs-trigger]:px-2 *:data-[slot=tabs-trigger]:text-xs">
           <TabsTrigger value="preview">Preview</TabsTrigger>
           <TabsTrigger value="code">Code</TabsTrigger>
         </TabsList>
diff --git a/apps/v4/content/docs/components/base/toggle-group.mdx b/apps/v4/content/docs/components/base/toggle-group.mdx
index cde192e6e6..17ed5aebbb 100644
--- a/apps/v4/content/docs/components/base/toggle-group.mdx
+++ b/apps/v4/content/docs/components/base/toggle-group.mdx
@@ -96,6 +96,16 @@ Use `orientation="vertical"` for vertical toggle groups.
 
 <ComponentPreview styleName="base-nova" name="toggle-group-disabled" />
 
+### Custom
+
+A custom toggle group example.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="toggle-group-font-weight-selector"
+  previewClassName="*:data-[slot=field]:max-w-xs"
+/>
+
 ## RTL
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
diff --git a/apps/v4/content/docs/components/radix/toggle-group.mdx b/apps/v4/content/docs/components/radix/toggle-group.mdx
index c87d40c0a3..4e78927343 100644
--- a/apps/v4/content/docs/components/radix/toggle-group.mdx
+++ b/apps/v4/content/docs/components/radix/toggle-group.mdx
@@ -96,6 +96,16 @@ Use `orientation="vertical"` for vertical toggle groups.
 
 <ComponentPreview styleName="radix-nova" name="toggle-group-disabled" />
 
+### Custom
+
+A custom toggle group example.
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="toggle-group-font-weight-selector"
+  previewClassName="*:data-[slot=field]:max-w-xs"
+/>
+
 ## RTL
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx
index ce8d9f19f6..e8beaf16cb 100644
--- a/apps/v4/examples/__index__.tsx
+++ b/apps/v4/examples/__index__.tsx
@@ -5244,6 +5244,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-font-weight-selector": {
+      name: "toggle-group-font-weight-selector",
+      filePath: "examples/radix/toggle-group-font-weight-selector.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-font-weight-selector")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-font-weight-selector"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-outline": {
       name: "toggle-group-outline",
       filePath: "examples/radix/toggle-group-outline.tsx",
@@ -10862,6 +10875,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-font-weight-selector": {
+      name: "toggle-group-font-weight-selector",
+      filePath: "examples/base/toggle-group-font-weight-selector.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-font-weight-selector")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-font-weight-selector"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-outline": {
       name: "toggle-group-outline",
       filePath: "examples/base/toggle-group-outline.tsx",
diff --git a/apps/v4/examples/base/toggle-group-font-weight-selector.tsx b/apps/v4/examples/base/toggle-group-font-weight-selector.tsx
new file mode 100644
index 0000000000..5c6e8dd4e3
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-font-weight-selector.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+
+export function ToggleGroupFontWeightSelector() {
+  const [fontWeight, setFontWeight] = React.useState("normal")
+  return (
+    <Field>
+      <FieldLabel>Font Weight</FieldLabel>
+      <ToggleGroup
+        value={[fontWeight]}
+        onValueChange={(value) => setFontWeight(value[0])}
+        variant="outline"
+        spacing={2}
+        size="lg"
+      >
+        <ToggleGroupItem
+          value="light"
+          aria-label="Light"
+          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>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="normal"
+          aria-label="Normal"
+          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>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="medium"
+          aria-label="Medium"
+          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>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="bold"
+          aria-label="Bold"
+          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>
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <FieldDescription>
+        Use{" "}
+        <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+          font-{fontWeight}
+        </code>{" "}
+        to set the font weight.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/ui-rtl/sidebar.tsx b/apps/v4/examples/base/ui-rtl/sidebar.tsx
index b334a2efdc..495ef3bb43 100644
--- a/apps/v4/examples/base/ui-rtl/sidebar.tsx
+++ b/apps/v4/examples/base/ui-rtl/sidebar.tsx
@@ -289,8 +289,8 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       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",
-        "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",
+        "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-e-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-w-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",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
@@ -565,7 +565,7 @@ function SidebarMenuAction({
         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",
           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",
+          "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",
           className
         ),
       },
diff --git a/apps/v4/examples/radix/sidebar-rtl.tsx b/apps/v4/examples/radix/sidebar-rtl.tsx
index 4783d7ce5b..02bd7dae5e 100644
--- a/apps/v4/examples/radix/sidebar-rtl.tsx
+++ b/apps/v4/examples/radix/sidebar-rtl.tsx
@@ -314,7 +314,8 @@ function SidebarContentInner({
 
   return (
     <>
-      <Sidebar collapsible="icon" dir={dir}>
+      <Sidebar collapsible="icon" dir={dir}
+        side={dir === "ltr" ? "left" : "right"}>
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
diff --git a/apps/v4/examples/radix/toggle-group-font-weight-selector.tsx b/apps/v4/examples/radix/toggle-group-font-weight-selector.tsx
new file mode 100644
index 0000000000..a2bcad8780
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-font-weight-selector.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+
+export function ToggleGroupFontWeightSelector() {
+  const [fontWeight, setFontWeight] = React.useState("normal")
+  return (
+    <Field>
+      <FieldLabel>Font Weight</FieldLabel>
+      <ToggleGroup
+        type="single"
+        value={fontWeight}
+        onValueChange={(value) => setFontWeight(value)}
+        variant="outline"
+        spacing={2}
+        size="lg"
+      >
+        <ToggleGroupItem
+          value="light"
+          aria-label="Light"
+          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>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="normal"
+          aria-label="Normal"
+          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>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="medium"
+          aria-label="Medium"
+          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>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="bold"
+          aria-label="Bold"
+          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>
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <FieldDescription>
+        Use{" "}
+        <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+          font-{fontWeight}
+        </code>{" "}
+        to set the font weight.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/ui-rtl/sidebar.tsx b/apps/v4/examples/radix/ui-rtl/sidebar.tsx
index 9c348b6886..92f8b2ce56 100644
--- a/apps/v4/examples/radix/ui-rtl/sidebar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/sidebar.tsx
@@ -288,8 +288,8 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       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",
-        "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",
+        "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-e-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-w-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",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
@@ -554,7 +554,7 @@ function SidebarMenuAction({
       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",
         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",
+        "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",
         className
       )}
       {...props}
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 8d376bd4c7..064c885109 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\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\"\nimport { Field, FieldDescription, FieldLabel } from \"@/registry/base-lyra/ui/field\"\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 value={[fontWeight]} onValueChange={(value) => setFontWeight(value[0])} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/base-maia/toggle-group-example.json
index 9409472e9a..048bfac136 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\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\"\nimport { Field, FieldDescription, FieldLabel } from \"@/registry/base-maia/ui/field\"\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 value={[fontWeight]} onValueChange={(value) => setFontWeight(value[0])} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/base-mira/toggle-group-example.json
index cd0aa890ae..4310f1a1e1 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\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\"\nimport { Field, FieldDescription, FieldLabel } from \"@/registry/base-mira/ui/field\"\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 value={[fontWeight]} onValueChange={(value) => setFontWeight(value[0])} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/base-nova/toggle-group-example.json
index 1eabd10bd4..8070f8ada9 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\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\"\nimport { Field, FieldDescription, FieldLabel } from \"@/registry/base-nova/ui/field\"\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 value={[fontWeight]} onValueChange={(value) => setFontWeight(value[0])} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/base-vega/toggle-group-example.json
index 57e3c13b31..2d56108fd7 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\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\"\nimport { Field, FieldDescription, FieldLabel } from \"@/registry/base-vega/ui/field\"\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 value={[fontWeight]} onValueChange={(value) => setFontWeight(value[0])} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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/radix-lyra/toggle-group-example.json b/apps/v4/public/r/styles/radix-lyra/toggle-group-example.json
index 534f1bb5cf..859242934e 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Field, FieldDescription, 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 {\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 type=\"single\" value={fontWeight} onValueChange={(value) => setFontWeight(value)} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/radix-maia/toggle-group-example.json
index 2497edeeb2..4b2d424eb1 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Field, FieldDescription, 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 {\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 type=\"single\" value={fontWeight} onValueChange={(value) => setFontWeight(value)} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/radix-mira/toggle-group-example.json
index 94d95c3ac4..a980c6d5af 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Field, FieldDescription, 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 {\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 type=\"single\" value={fontWeight} onValueChange={(value) => setFontWeight(value)} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/radix-nova/toggle-group-example.json
index ad7329ece5..8283bcd4ed 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Field, FieldDescription, 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 {\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 type=\"single\" value={fontWeight} onValueChange={(value) => setFontWeight(value)} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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-example.json b/apps/v4/public/r/styles/radix-vega/toggle-group-example.json
index aac6e0b4ba..653e4c2105 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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\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    </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 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\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Field, FieldDescription, 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 {\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 type=\"single\" value={fontWeight} onValueChange={(value) => setFontWeight(value)} variant=\"outline\" spacing={2} size=\"lg\">\n          <ToggleGroupItem value=\"light\" aria-label=\"Light\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-light leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"normal\" aria-label=\"Normal\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-normal leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"medium\" aria-label=\"Medium\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-medium leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\" className=\"flex flex-col items-center justify-center size-16 rounded-xl\">\n            <span className=\"text-2xl font-bold leading-none\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use <code className=\"font-mono bg-muted px-1 py-0.5 rounded-md\">font-{fontWeight}</code> 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/registry/bases/base/examples/toggle-group-example.tsx b/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
index b846920621..7059795e53 100644
--- a/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
+++ b/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
@@ -1,7 +1,16 @@
+"use client"
+
+import * as React from "react"
+
 import {
   Example,
   ExampleWrapper,
 } from "@/registry/bases/base/components/example"
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/registry/bases/base/ui/field"
 import { Input } from "@/registry/bases/base/ui/input"
 import {
   Select,
@@ -34,6 +43,7 @@ export default function ToggleGroupExample() {
       <ToggleGroupVerticalOutline />
       <ToggleGroupVerticalOutlineWithIcons />
       <ToggleGroupVerticalWithSpacing />
+      <ToggleGroupFontWeightSelector />
     </ExampleWrapper>
   )
 }
@@ -460,6 +470,64 @@ function ToggleGroupVerticalOutlineWithIcons() {
   )
 }
 
+function ToggleGroupFontWeightSelector() {
+  const [fontWeight, setFontWeight] = React.useState("normal")
+  return (
+    <Example title="Font Weight Selector">
+      <Field>
+        <FieldLabel>Font Weight</FieldLabel>
+        <ToggleGroup
+          value={[fontWeight]}
+          onValueChange={(value) => setFontWeight(value[0])}
+          variant="outline"
+          spacing={2}
+          size="lg"
+        >
+          <ToggleGroupItem
+            value="light"
+            aria-label="Light"
+            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>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="normal"
+            aria-label="Normal"
+            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>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="medium"
+            aria-label="Medium"
+            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>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="bold"
+            aria-label="Bold"
+            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>
+          </ToggleGroupItem>
+        </ToggleGroup>
+        <FieldDescription>
+          Use{" "}
+          <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+            font-{fontWeight}
+          </code>{" "}
+          to set the font weight.
+        </FieldDescription>
+      </Field>
+    </Example>
+  )
+}
+
 function ToggleGroupVerticalWithSpacing() {
   return (
     <Example title="Vertical With Spacing">
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 528947d289..77be76e399 100644
--- a/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx
@@ -1,7 +1,16 @@
+"use client"
+
+import * as React from "react"
+
 import {
   Example,
   ExampleWrapper,
 } from "@/registry/bases/radix/components/example"
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/registry/bases/radix/ui/field"
 import { Input } from "@/registry/bases/radix/ui/input"
 import {
   Select,
@@ -34,6 +43,7 @@ export default function ToggleGroupExample() {
       <ToggleGroupVerticalOutline />
       <ToggleGroupVerticalOutlineWithIcons />
       <ToggleGroupVerticalWithSpacing />
+      <ToggleGroupFontWeightSelector />
     </ExampleWrapper>
   )
 }
@@ -471,6 +481,65 @@ function ToggleGroupVerticalOutlineWithIcons() {
   )
 }
 
+function ToggleGroupFontWeightSelector() {
+  const [fontWeight, setFontWeight] = React.useState("normal")
+  return (
+    <Example title="Font Weight Selector">
+      <Field>
+        <FieldLabel>Font Weight</FieldLabel>
+        <ToggleGroup
+          type="single"
+          value={fontWeight}
+          onValueChange={(value) => setFontWeight(value)}
+          variant="outline"
+          spacing={2}
+          size="lg"
+        >
+          <ToggleGroupItem
+            value="light"
+            aria-label="Light"
+            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>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="normal"
+            aria-label="Normal"
+            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>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="medium"
+            aria-label="Medium"
+            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>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="bold"
+            aria-label="Bold"
+            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>
+          </ToggleGroupItem>
+        </ToggleGroup>
+        <FieldDescription>
+          Use{" "}
+          <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+            font-{fontWeight}
+          </code>{" "}
+          to set the font weight.
+        </FieldDescription>
+      </Field>
+    </Example>
+  )
+}
+
 function ToggleGroupVerticalWithSpacing() {
   return (
     <Example title="Vertical With Spacing">